<template>
  <div class="demo-input">
    <zyl-input/>
    <h4>状态</h4>
    <zyl-input v-model="state.text" v-for="item in ['primary','success','warn','error','info']" :key="item" :status="item" style="margin-right: 8px"/>
    <h4>类型提示</h4>
    <zyl-input ref="myInput"/>
    <button @click="outerClear">outer clear</button>
    <button @click="outerFocus">outer focus</button>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue';
  import { Input } from '../../../src';

  export default defineComponent({
    name: "demo-input",
    setup() {
      const inputRef = Input.use.ref('myInput');
      const state = reactive({
        text: 'hello world'
      })

      return {
        outerClear: () => {
          inputRef.value!.methods.clear();
        },
        outerFocus: () => {
          inputRef.value!.methods.focus(false);
        },
        state,
      }
    },
  })
</script>

<style lang="scss">

</style>